<template>
  <div class="teamList">
    <Row :gutter="16" type="flex" justify="start">
      <Col span="24">
        <div class="kan">
          <div class="title">{{ buildingAlias }}</div>
          <Button type="primary">
            <a
              href="https://images.tospurfang.com/doc/%E5%9B%A2%E9%98%9F%E7%AE%A1%E7%90%86%E6%93%8D%E4%BD%9C%E8%AF%B4%E6%98%8E.pdf"
              style="color: #fff"
              target="_blank">
              查看操作指引
            </a>
          </Button>
        </div>
      </Col>
      <Col class="tips_warp" v-if="callInUserflag != null && tabName == 'onCase' && unlocking('0102030600')">
        <div class="tips">
          <Icon type="md-alert" class="tips_icon" />
          <span v-if="callInUserflag == 0 || callInUserflag == -1 || callInUserflag == 3">
            提示：{{ tipsData.userName }} 将调入您的案场
            <span class="AssignCustomers_name" @click="callInFun(0)">立即处理</span>
          </span>
          <span v-if="callInUserflag == 1">
            提示：{{ tipsData.userName }} 已被 {{ tipsData.targetCaseName }} 退回
            <span class="AssignCustomers_name" @click="callInFun(1)">查看原因</span>
          </span>
          <span v-if="callInUserflag == 2">
            提示：{{ tipsData.userName }} 已从公司离职，请尽快将TA从您的案场移除
            <span class="AssignCustomers_name" @click="callInFun(2)">立即处理</span>
          </span>
        </div>
        <div class="check_more" @click="checkMore" v-if="tipsList.length > 1">查看更多</div>
      </Col>
    </Row>
    <Tabs v-model="tabName" name="teamsTab" :animated="false">
      <TabPane label="在案成员" name="onCase" tab="teamsTab">
        <on-case
          v-if="tabName == 'onCase' && isTeamsId"
          ref="onCase"
          :userMess="userMess"
          :teamId="teamId"
          :buildingId="buildingId"
          :taskUserId="taskUserId" />
      </TabPane>
      <TabPane label="离案成员" name="leaveCase" tab="teamsTab">
        <leave-case
          v-if="tabName == 'leaveCase' && isTeamsId"
          ref="leaveCase"
          :userMess="userMess"
          :teamId="teamId"
          :buildingId="buildingId"
          :taskUserId="taskUserId" />
      </TabPane>
    </Tabs>
    <!-- 成员异动 -->
    <Modal
      v-model="callInUser"
      :title="callInUserTitle"
      @on-cancel="AllModalCancel"
      width="800px"
      :footerHide="true">
      <call-in
        v-if="callInUser"
        @onClose="AllModalCancel"
        @onChangeTable="reTeamList"
        @addUserRatio="addUserRatio"
        :callInUserflag="callInUserflag"
        :tipsData="tipsData" />
    </Modal>
    <task-more ref="taskMore" @openTask="openTask" />
  </div>
</template>
<script>
  import teamsApi from '@/biz/buildingManagement/teams'
  import onCase from './component/onCase.vue'
  import leaveCase from './component/leaveCase.vue'
  import callIn from './component/modal/callIn'
  import taskMore from './component/modal/taskModal.vue'
  export default {
    components: {
      onCase,
      leaveCase,
      callIn,
      taskMore
    },
    data() {
      return {
        buildingAlias: '',
        cityName: '',
        buildingId: '',
        teamId: '',
        userMess: this.$dt.userInfo(),
        callInUser: false,
        callInUserTitle: '成员调入',
        callInUserflag: null,
        tabName: 'onCase',
        tipsData: {},
        isTeamsId: false,
        taskUserId: '',
        tipsList: []
      }
    },
    methods: {
      callInFun(type) {
        if (type == 2) {
          this.callInUserTitle = '调出成员'
        } else if (type == 1) {
          this.callInUserTitle = '退回原因'
        } else if (type == 0) {
          this.callInUserTitle = '调入成员'
        }
        this.callInUser = true
      },
      AllModalCancel() {
        this.callInUser = false
        this.getChangeTips()
        this.getChangeTipsList()
      },
      getChangeTips(taskUserId) {
        let params = {
          buildingId: this.buildingId,
          userId: taskUserId
        }
        teamsApi.getChangeTips(params).then((res) => {
          if (res) {
            this.callInUserflag = res.type
            this.tipsData = res
            if (taskUserId) {
              this.callInFun(res.type)
            }
          } else {
            this.callInUserflag = null
            this.tipsData = {}
          }
        })
      },

      reTeamList() {
        this.$refs.onCase.reTeamList()
      },
      addUserRatio(val) {
        this.$refs.onCase.addUserRatio(val)
      },
      //获取案场团队id
      getTermIdByBuildingId() {
        teamsApi.TermIdByBuildingId({ buildingId: this.buildingId }).then(async (res) => {
          if (res) {
            await this.$dt.session.set('teamsId', res.teamId)
            this.teamId = res.teamId
            this.isTeamsId = true
          } else {
            this.$Message.error('未初始化团队，请联系管理员！')
          }
        })
      },
      //查看更多异动信息
      checkMore() {
        this.$refs.taskMore.show({ tipsList: this.tipsList })
      },
      //异动列表打开异动详情弹窗
      openTask(data) {
        this.callInUserflag = data.type
        this.tipsData = data
        this.callInFun(data.type)
      },
      //获取异动信息list
      getChangeTipsList() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId
        }
        teamsApi.getChangeTipsList(params).then((res) => {
          if (res) {
            this.tipsList = res
          }
        })
      }
    },
    created() {
      let buildMess = this.$dt.buildInfo()
      this.buildingAlias = buildMess.housesName
      this.cityName = buildMess.city
      this.buildingId = buildMess.housesId
    },
    mounted() {
      this.getTermIdByBuildingId()
      if (this.$route.params.userId) {
        this.taskUserId = this.$route.params.flag == 'leaveOffice' ? this.$route.params.userId : ''
        this.tabName = this.$route.params.curTab
      }
      if (this.$route.params.openCallIn) {
        this.getChangeTips(this.$route.params.userId)
      } else {
        this.getChangeTips()
      }
      this.getChangeTipsList()
    },
    destroyed() {
      this.$dt.session.remove('teamsId')
    }
  }
</script>
<style lang="scss" scoped>
  .teamList {
    padding: 20px;

    .title {
      font-size: 26px;
      line-height: 30px;
      margin-bottom: 20px;
      // padding: 20px 10px;
    }

    .tips_warp {
      display: flex;

      .check_more {
        cursor: pointer;
        line-height: 32px;
        margin-left: 10px;
        font-size: 15px;
        color: #0f42a7;
      }
    }

    .tips {
      text-align: center;
      margin-bottom: 15px;
      background-color: rgba(254, 252, 236, 1);
      width: auto;
      line-height: 32px;
      padding: 0 10px;

      .tips_icon {
        font-size: 20px;
        color: #0f42a7;
      }

      .AssignCustomers_name {
        margin-left: 10px;
        cursor: pointer;
        color: #0f42a7;
      }
    }
  }

  .kan {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
</style>
